﻿
@section scripts{
    <style type="text/css">
        #container {
            width: 400px;
            min-height: 300px;
            background-color: lightgreen;
            margin: auto;
            padding: 10px;
            text-align: center;
        }

        li {
            list-style: none;
            text-align: left;
        }
    </style>
    <!-- {{each}}标签的使用 -->
    <script id="each" type="text/x-jquery-tmpl">
        <h3>users</h3>
        {{each(i,user) users}}
        <div>${i+1}:${user.name}</div>
        {{/each}}
        <h3>depart</h3>
        {{each departs}}
        <div>{{= $value.name}}</div>
        {{/each}}
    </script>

    <script id="demo" type="text/x-jquery-tmpl">
        <div style="margin-bottom:10px;">
            <span>${id}</span>
            <span style="margin-left:10px;">{{= name}}</span>
            <span style="margin-left:10px;">${age}</span>
            <span style="margin-left:10px;">${number}</span>
            {{if status}}
            <span>status:${status}</span>
            {{else app}}
            <span>app:${app}</span>
            {{else}}
            <span>none</span>
            {{/if}}
            ${button}
            {{html button}}
        </div>
    </script>

    <script id="tmpl1" type="text/x-jquery-tmpl">
        <div style="margin-bottom:10px;">
            <span>${id}</span>
            <span style="margin-left:10px;">{{tmpl($data) '#tmpl2'}}</span>
        </div>
    </script>
    <script id="tmpl2" type="type/x-jquery-tmpl">
        {{each name}}
        ${$value}
        {{/each}}
    </script>

    <script id="template1" type="text/x-jquery-tmpl">
        <a href="${Link}" target="_blank">${Text}</a>
    </script>
    <script id="template2" type="text/x-jquery-tmpl">
        <li>${ID}.<span>${Name}</span></li>
    </script>
    <script type="text/javascript">
        $(function () {
            var link = { Text: '蟋蟀', Link: 'http://www.cnblogs.com/xishuai/' };
            var users = [{ ID: '1', Name: 'xishuai1' }, { ID: '2', Name: 'xishuai2' }, { ID: '3', Name: '3333' }];
            //手动初始化数据
            var ex = [{ id: 1, name: 'xiaoming', age: 12, status: 1, number: '001' },
            { id: 2, name: 'xiaowang', age: 13, app: 1, number: '002', button: '<button>save</button>' }];
            //调用模板进行渲染
            $("#demo").tmpl(ex).appendTo('#div_demo');

            $('#template1').tmpl(link).appendTo('#div_template1');
            $('#template2').tmpl(users).appendTo('#div_template2');

            var eachData = {
                users: [{
                    name: 'xiaoming'
                }, {
                    name: 'xiaowang'
                }],
                departs: [{
                    name: 'IT'
                }, {
                    name: 'test'
                }]
            };
            $("#each").tmpl(eachData).appendTo('#div_each');

            //$.get("url", function (data) {
            //    $('#template1').tmpl(data).appendTo('#div_template1');
            //});

            var data2 = [{
                id: 1,
                name: ['zhang', 'xiao', 'liang']
            }, {
                id: 2,
                name: ['li', 'tian', 'ming']
            }];

            $("#tmpl1").tmpl(data2).appendTo('#tmpl');
        });
    </script>
}

<div class="warp">
    <div id="div_template1"></div>
    <br />
    <ul id="div_template2">
    </ul>
    <br />
    <div id="div_demo"></div>
    <input type="button" value="查询" id="query">
    <div id="div_each"></div>
    <br />
    <div id="tmpl"></div>
</div>

